import { ref } from 'vue';
import { ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus';
const useElementExample = () => {
  /* 级联 */
  const cascaderKey: any = ref(null);
  const casHandleChange = () => {
    // 解决目前级联选择器搜索输入报错问题
    cascaderKey.value += cascaderKey.value;
  };
  /*
   * 通知弹框
   * message：通知的内容
   * type：通知类型
   * duration：通知显示时长（ms）
   * */
  const elMessage = (message?: string, type?: any) => {
    ElMessage({
      showClose: true,
      message: message || '成功',
      type: type || 'success',
      center: false
    });
  };
  /*
   * loading加载框
   * 调用后通过 loadingId.close() 进行关闭
   * */
  let loadingId: any = null;
  const elLoading = () => {
    loadingId = ElLoading.service({
      lock: true,
      text: '数据载入中',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.1)'
    });
  };
  /*
   * 提示
   * message: 提示内容
   * type：提示类型
   * title：提示标题
   * duration：提示时长（ms）
   * */
  const elNotify = (message?: string, type?: any, title?: string, duration?: number) => {
    ElNotification({
      title: title || '提示',
      type: type || 'success',
      message: message || '请传入提示消息',
      position: 'top-right',
      duration: duration || 2500,
      offset: 40
    });
  };
  /*
    确认弹框(没有取消按钮)
  * title:提示的标题
  * message:提示的内容
  * return Promise
  * */
  const elConfirmNoCancelBtn = (title?: string, message?: string) => {
    return ElMessageBox({
      message: message || '你确定要删除吗',
      title: title || '确认框',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      showCancelButton: false,
      type: 'warning'
    });
  };
  /*
   * 确认弹框
   * title:提示的标题
   * message:提示的内容
   * return Promise
   * */
  const elConfirm = (title?: string, message?: string) => {
    return ElMessageBox({
      message: message || '你确定要删除吗',
      title: title || '确认框',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
  };

  return {
    casHandleChange,
    elMessage,
    elLoading,
    elNotify,
    elConfirmNoCancelBtn,
    elConfirm
  };
};

export const useElement = useElementExample;

export default useElementExample;
